<!--
 * @Author: Tim
 * @Date: 2020-08-13 12:00:57
 * @LastEditTime: 2020-08-27 15:59:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /afire/components/afire-page.vue
-->
<template>
    <view class="af-page-container">
        <view class="page-layout-hd-bg" v-if="hdBgColor || hdBgImage">
            <!-- 背景色块嵌入 -->
            <view class="page-hd-bg-inner" :style="getHdBgStyl">
                <image :src="hdBgImage" class="page-hd-bg-img" v-if="hdBgImage"></image>
            </view>
        </view>

        <!-- 页面内容 -->
        <view class="af-flex-col page-container-wrap" @tap.stop>
            <!-- 状态栏目 -->
            <view class="page-container-status-bar" :style="getNavHeight" v-if="isTopPage"></view>

            <!-- 导航栏 -->
            <view class="af-flex-row page-container-hd" :style="getNavBg">
                <view class="af-flex-row page-container-hd-inner">
                    <view class="af-flex-row page-back-arrow-area" v-if="hasHistoryPage" @tap="goBack">
                        <image class="page-back-arrow" :src="getArrowIcon" />
                    </view>
                    <view class="page-container-hd-title af-txt-overflow"
                        :class="navbarTxtColor == 'white' ? 'theme-white' : 'theme-black'">
                        <slot name="navSlotBefore"></slot>
                        <text>{{getTitle}}</text>
                        <slot name="navSlotAfter"></slot>
                    </view>
                </view>
            </view>

            <!-- 页面内容 -->
            <view class="af-flex-1 page-container-bd">
                <slot></slot>
            </view>
        </view>
    </view>
</template>

<script>
    import Vue from "vue";
    /**
     * Note: 注意当前封装的页面布局组件需要动态结合page.json配置
     * 当前如果用默认的主特色的话，需要对应page.json里面配置：style -- 
     * navigationBarTextStyle:white
     */
    const TAG = "af-page.vue";

    ///加载系统信息到配置文件里面
    const systemInfo = uni.getSystemInfoSync();
    Vue.prototype.$systemInfo = systemInfo;

    export default {
        name: "AfPage",

        props: {
            hdBgColor: String,

            ///背景色自定义图片
            hdBgImage: String,

            hdBgHeight: {
                type: Number,
                default: 400
            },

            /* 是否是顶级容器 */
            isTopPage: {
                type: Boolean,
                default: true
            },

            /**默认的导航栏字体主题色 */
            navbarTxtColor: {
                type: String,

                /* 默认的轻主题色，也即为白色 */
                default: 'black'
            },

            /**默认的导航栏主题色 */
            navbarBackground: {
                type: String,
                default: 'transparent'
            },

            title: {
                type: String,

                /* 默认的为空，会从全局store里面配置的默认的title获取 */
                default: ""
            }
        },

        data() {
            return {
                hasHistoryPage: false,
                whiteBackArrow: '',
                blackBackArrow: ''
            }
        },

        computed: {
            getHdBgStyl() {
                let style = `height: ${this.hdBgHeight}rpx;position:relative;`

                if (this.hdBgColor) style += `background-color: ${this.hdBgColor};`;
                return style;
            },

            getTitle() {
                return this.title;
            },

            getArrowIcon() {
                return this.navbarTxtColor != 'black' ? this.whiteBackArrow : this.blackBackArrow;
            },

            getNavHeight() {
                ///默认的单位px -->> 此处刚好为状态栏的高度
                let statusBarHeight = this.$systemInfo.statusBarHeight;
                let bg = this.navbarBackground;
                return `height: ${statusBarHeight}px;background-color:${bg}`;
            },

            getNavBg() {
                return `background-color:${this.navbarBackground}`;
            }
        },

        created() {
            // console.log(this.$globalConfig)
            let pageList = getCurrentPages();

            if (pageList.length > 1) {
                console.log(TAG, '此为小程序页面堆栈中第' + pageList.length + '个页面');
                this.hasHistoryPage = true;
            }

            ///动态的设置头部的状态栏颜色
            let color = this.navbarTxtColor != 'black' ? '#ffffff' : '#000000';
            let bgcolor = this.navbarTxtColor != 'black' ? '#000000' : '#ffffff';
            setTimeout(() => {
                uni.setNavigationBarColor({
                    frontColor: color,
                    backgroundColor: bgcolor
                });
            }, 80);
        },

        methods: {
            goBack(e) {
                ///返回上一级
                uni.navigateBack();
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page-container-wrap {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        overflow: hidden;
        box-sizing: border-box;
    }

    .page-container-hd {
        position: relative;
        width: 100%;
        align-items: flex-end;
    }

    .page-hd-bg-img {
        width: 100%;
        height: 100%;
    }

    .page-container-bd {
        width: 100%;
        position: relative;
        overflow: hidden;
        overflow-y: auto;
    }

    .page-container-hd-inner {
        width: 100%;
        height: 86upx;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        justify-content: center;
        /* 兼容小程序头部右侧原生自带更多炫富按钮 */
        padding-right: 32upx;

        .page-back-arrow-area {
            height: 86upx;
            width: 80upx;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            padding-left: 20upx;
            z-index: 99;

            .page-back-arrow {
                width: 50upx;
                height: 50upx;
            }
        }
    }

    .page-container-status-bar {
        width: 100%;
        position: relative;
    }

    .page-container-hd-title {
        font-size: 36upx;
        text-align: center;
        max-width: 55%;

        &.theme-white {
            color: #FFFFFF;
        }

        &.theme-black {
            color: #14121E;
        }
    }

    .page-layout-hd-bg {
        position: relative;
        width: 100%;

        .page-layout-bg-img {
            width: 750upx;
            height: 100%;
        }
    }
</style>